<div *ngIf="!destroy"
     class="apes-alert"
     [class.apes-alert-success]="apesType === 'success'"
     [class.apes-alert-info]="apesType === 'info'"
     [class.apes-alert-warning]="apesType === 'warning'"
     [class.apes-alert-error]="apesType === 'error'"
     [class.apes-alert-no-icon]="!apesShowIcon"
     [class.apes-alert-banner]="apesBanner"
     [class.apes-alert-closable]="apesCloseable"
     [class.apes-alert-with-description]="!!apesDescription"
     [@slideAlertMotion]
     (@slideAlertMotion.done)="onFadeAnimationDone()">
  <ng-container *ngIf="apesShowIcon">
    <i class="apes-alert-icon" [ngClass]="apesIconType" *ngIf="isIconTypeObject; else iconTemplate"></i>
    <ng-template #iconTemplate>
      <i apes-icon class="apes-alert-icon" *ngIf="apesType !== 'error'" [apesType]="iconType" [apesTheme]="iconTheme"></i>
      <img *ngIf="apesType === 'error'" [src]="'./assets/tmp/img/fn/info.png'" style="width: 16px; height: 16px;margin-right: 3px">
    </ng-template>
  </ng-container>
  <span class="apes-alert-message" *ngIf="apesMessage">
    <ng-container *apesStringTemplateOutlet="apesMessage">{{ apesMessage }}</ng-container>
  </span>
  <span class="apes-alert-description" *ngIf="apesDescription">
    <ng-container *apesStringTemplateOutlet="apesDescription">{{ apesDescription }}</ng-container>
  </span>
  <a *ngIf="apesCloseable || apesCloseText"
     class="apes-alert-close-icon"
     (click)="closeAlert()">
    <ng-template #closeDefaultTemplate>
      <i apes-icon apesType="close"></i>
    </ng-template>
    <ng-container *ngIf="apesCloseText; else closeDefaultTemplate">
      <ng-container *apesStringTemplateOutlet="apesCloseText">{{ apesCloseText }}</ng-container>
    </ng-container>
  </a>
</div>

